<template>
	<view>
		<scroll-view-wrap>
			<template #topFixed>
				<uni-search-bar placeholder="搜索单据编码" @confirm="search" cancelButton="always" v-model="searchValue"
					@cancel="cancel" class="searchbar">
				</uni-search-bar>
			</template>
			<template #content>
				<view class="list-cont">
					<uni-section title="新乐电器有限公司" type="line">
						<uni-card :title="'单据编码:'+item.fchrExportStockNo" :extra="'序号:'+(index+1)"
							v-for="(item,index) in stockList" :key="index">
							<uni-collapse>
								<uni-collapse-item :title="'单序号:'+item.ftinorder" :open="true">
									<view @click="toUploadImage(item)">
										<uni-table border>
											<uni-tr>
												<uni-td>箱内:{{item.fchrbox}}</uni-td>
												<uni-td>封号：{{item.fchrSealNumber}}</uni-td>
											</uni-tr>
											<uni-tr>
												<uni-td>提单号：{{item.fchrBillofladingNo}}</uni-td>
												<uni-td>箱号:{{item.fchrCartonNo}}</uni-td>
											</uni-tr>
											<uni-tr>
												<uni-td>生产批号：{{item.fchrBatchProduction}}</uni-td>
												<uni-td>客户名称：{{item.fchrcustomername}}</uni-td>
											</uni-tr>
											<uni-tr>
												<uni-td>单据日期：{{item.fdtmdate}}</uni-td>
												<uni-td>报关日期：{{item.fdtmArrivePort}}</uni-td>
											</uni-tr>
											<uni-tr>
												<uni-td>联系人：{{item.fchrlinkman}}</uni-td>
												<uni-td>业务员： {{item.fchremployee}}</uni-td>
											</uni-tr>
										</uni-table>
									</view>
								</uni-collapse-item>
							</uni-collapse>
						</uni-card>
					</uni-section>
					<uni-load-more iconType="auto" :status="status" @clickLoadMore="addList" :contentText="contentText">
					</uni-load-more>
				</view>
			</template>
		</scroll-view-wrap>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	import api from '@/api/listContainers.js';
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		onPageScroll
	} from '@dcloudio/uni-app'

	const stockList = ref([]);
	const page = ref(1); //页码
	const limit = ref(12); //页数
	const contentText = ref({
		contentdown: "点击显示更多",
		contentrefresh: "正在加载...",
		contentnomore: "没有更多数据了"
	})
	const status = ref("more"); //上拉状态
	const searchValue = ref("") //搜索框的值




	//获取物流集装箱列表
	const getStockList = (data) => {


		api.getExportBoxStockList(data).then(res => {

			uni.stopPullDownRefresh();
			if (res.data.length != 0) {
				stockList.value = stockList.value.concat(res.data);
				status.value = "more"
			} else {
				status.value = "noMore"
			}
		}).catch(err => {
			console.log(err)
			uni.showToast({
				title: '出现错误，请联系管理员',
				icon: "error",
				duration: 2000
			});
		})
	}
	getStockList({
		page: page.value,
		limit: limit.value
	});

	//上拉添加列表数据
	const addList = () => {
		status.value = "loading"
		page.value++;

		getStockList({
			page: page.value,
			limit: limit.value,
			code: searchValue.value
		});
	}

	//下拉刷新功能
	onPullDownRefresh(() => {
		stockList.value = []

		page.value = 1;
		getStockList({
			page: page.value,
			limit: limit.value
		});
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	});


	//跳转上传照片页面
	const toUploadImage = (item) => {

		uni.navigateTo({
			url: "/pages/UploadImage/UploadImage",
			success(res) {

				res.eventChannel.emit('stock', {
					data: item
				});
			}
		})
	}

	//搜索框点击完成时触发
	const search = (sea) => {

		searchValue.value = sea.value.replace(/\s/g, '')
		stockList.value = [];

		getStockList({
			code: searchValue.value
		})
	}
	//点击取消按钮时触发
	const cancel = () => {

	}
</script>

<style>

</style>